Viewing Reports using HTML5 Viewer

Viewing Reports in HTML5 Viewer

The following steps describe how to view reports in HTML5 Viewer.

Create a new Visual Studio Web Application project.
Copy and place GrapeCity.ActiveReports.Viewer.Html.js, GrapeCity.ActiveReports.Viewer.Html.min.js and GrapeCity.ActiveReports.Viewer.Html.css files at a suitable location near the target HTML page.
Note: In ActiveReports, these files are located in the C:\Program Files\GrapeCity\ActiveReports 11\Deployment\Html

In the target HTML page, add the references to the GrapeCity.ActiveReports.Viewer.Html.css, GrapeCity.ActiveReports.Viewer.Html.js and its following dependencies:

jQuery 1.9.0 or higher
Bootstrap 3.0
Knockout.js 2.3.0 or higher

Note: You can obtain the dependencies like jQuery from Content Delivery Network (CDN) or copy them locally.

Paste inside the <head></head> tags	Copy Code
<link rel="stylesheet" href="css/GrapeCity.ActiveReports.Viewer.Html.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js" type="text/javascript"></script> <script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>

Paste inside the <head></head> tags

Copy Code

<link rel="stylesheet" href="css/GrapeCity.ActiveReports.Viewer.Html.css" />    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
 type="text/javascript"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"
 type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"
 type="text/javascript"></script>
<script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js"
 type="text/javascript"></script>

Add the reference to the bootstrap.min.css in the target HTML page.

Paste inside the <head></head> tags	Copy Code
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

In the target HTML page, add the DIV element that will contain the HTML5 Viewer.

Paste inside the <body></body> tags	Copy Code
<div id="viewer" style="width:800px;height:600px;"></div>

From the Project menu, select Add New Item.
In the Add New Item dialog that appears, select ActiveReports 11 Web Service and click Add. The ActiveReports 11 Web Service is required for the proper functioning of the HTML5 Viewer.
Add an ActiveReport to the Visual Studio project. See Adding an ActiveReport to a Project for information on adding different report layouts.

Open the licenses.licx file, and add the following references to it.

Paste inside the licenses.licx file	Copy Code
GrapeCity.ActiveReports.SectionReport, GrapeCity.ActiveReports.v11, Version=11.2.10750.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff GrapeCity.ActiveReports.PageReport, GrapeCity.ActiveReports.v11, Version=11.2.10750.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff GrapeCity.ActiveReports.Export.Pdf.Section.PdfExport, GrapeCity.ActiveReports.Export.Pdf.v11, Version=11.2.10750.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff GrapeCity.ActiveReports.Web.WebViewer, GrapeCity.ActiveReports.Web.v11, Version=11.2.10750.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff

Paste inside the licenses.licx file

Copy Code

GrapeCity.ActiveReports.SectionReport, GrapeCity.ActiveReports.v11, Version=11.2.10750.0,
Culture=neutral, PublicKeyToken=cc4967777c49a3ff
GrapeCity.ActiveReports.PageReport, GrapeCity.ActiveReports.v11, Version=11.2.10750.0,
Culture=neutral, PublicKeyToken=cc4967777c49a3ff
GrapeCity.ActiveReports.Export.Pdf.Section.PdfExport, GrapeCity.ActiveReports.Export.Pdf.v11,
Version=11.2.10750.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff
GrapeCity.ActiveReports.Web.WebViewer, GrapeCity.ActiveReports.Web.v11, Version=11.2.10750.0,
Culture=neutral, PublicKeyToken=cc4967777c49a3ff

Add the following code to view your report in the HTML5 Viewer. The code might vary depending on the technology that you use to develop the HTML5 Viewer component.

Paste inside the <script></script> tags	Copy Code
$(function () { var viewer = GrapeCity.ActiveReports.Viewer( { element: '#viewer', report: { id: "PageReport.rdlx" }, reportService: { url: '/ActiveReports.ReportService.asmx' }, uiType: 'desktop' }); });

Paste inside the <script></script> tags

Copy Code

$(function ()
{
   var viewer = GrapeCity.ActiveReports.Viewer(
   {
      element: '#viewer',
      report: {
         id: "PageReport.rdlx"
      },
      reportService: {
         url: '/ActiveReports.ReportService.asmx'
      },
      uiType: 'desktop'
      
   });
});

Note: The reportID should be a full name of the class when you display a Section Report.

Press F5 to run the project.